<template>
  <div class="app-container">

    <div>
      <el-form ref="mytext" :inline="true" :model="mytext" class="demo-form-inline" label-width="80px">
        <el-form-item label="用户名">
            <el-input  v-model="mytext" ></el-input>
          </el-form-item>
          <el-form-item >
              <el-button type="primary" @click="selectWhere">查询</el-button>
             <el-button type="warning">取消</el-button>
            </el-form-item>
      </el-form>
       </div>
<div>
      <el-button type="success" @click="add"> 添加</el-button>
    </div>
    <div>
     <el-table :data="tableData" v-loading:loading border  style="width: 100%">
       <el-table-column prop="id" label="序号" width="180">
       </el-table-column>
          <el-table-column prop="img" label="用户头像" width="180">
            <teleport slot-scope="scope">
                <img :src="scope.row.img" width="150" height="150" alt=""/>
              </teleport>
            </el-table-column>
          <el-table-column prop="name" label="用户名" width="180">
          </el-table-column>
          <el-table-column prop="sex" label="性别" width="180">
          </el-table-column>
          <el-table-column prop="age" label="年龄" width="180">
          </el-table-column>
          <el-table-column  prop="desc" label="备注" width="180">
          </el-table-column>
 

<el-table-column  label="操作">
  <teleport slot-scope='scope'>
            <el-button type="primary" icon="el-icon-edit" @click="update(scope.row)" size="small">修改</el-button>
            <el-button type="danger" icon="el-icon-delete" size="small" @click="del(scope.row.id)">删除</el-button>
             </teleport>
             </el-table-column>


        </el-table>
</div>



<el-pagination
            :current-page="pageIndex"
            :page-size="pageSize"
            :total="total"
            style="padding: 30px 0; text-align: center;"
            layout="total, prev, pager, next, jumper"
            @current-change="listPage"
          el-pagination/>
         <el-dialog
                title="添加/修改用户窗体" :visible.sync="dialogVisible" width="65%">
                  <el-form ref="form" v-model="addForm" label-width="120px">
                    <el-form-item label="序号">
                      <el-input v-model="addForm.id"></el-input>
                    </el-form-item>
                      <el-form-item label="用户头像">
                        <el-input type="img" v-model="addForm.img"></el-input>
                   </el-form-item>

                   <el-upload
      class="upload-demo"
      :action="ossUploadUrl"
      :on-success="handleFileUploadSuccess"
      :on-error="handleFileUploadError"
      :before-upload="beforeUpload"
      :file-list="addForm"
      :show-file-list="true"
    >
      <el-button size="small" type="primary">点击上传图片</el-button>
    </el-upload>
    <img v-if="addForm.img" :src="addForm.img" alt="上传的图片" width="150px" height="150px">


                      
                      <el-form-item label="用户名">
                        <el-input type="name" v-model="addForm.name"></el-input>
                      </el-form-item>

                      <el-form-item label="选择性别">
                         <el-radio-group v-model="addForm.sex">
                            <el-radio :label="0">男</el-radio>
                            <el-radio :label="1">女</el-radio>

                          </el-radio-group>
                        </el-form-item>
                        <el-form-item label="年龄">
                          <el-input type="age" v-model="addForm.age"></el-input>
                        </el-form-item>
                   <el-form-item label="备注">
                      <el-input type="textarea" v-model="addForm.desc"></el-input>
                    </el-form-item>
                  </el-form>

                <span slot="footer" class="dialog-footer">
                  <el-button @click="dialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="saveAddForm">确 定</el-button>
                </span>
              </el-dialog>
          </div>

</template>

<script>

import OSS from 'ali-oss';
const client = new OSS({
  key:'customer',
  accessKeyId: 'LTAI5tMA3X5zE5jeXAuST8yq',
  accessKeySecret: '7TzUerNZLa5pvrgXan8npaP0BsOYH7',
  bucket: 'haluki',
  endpoint: 'oss-cn-hangzhou.aliyuncs.com',
});
export default {
   name:'index',
        data() {
          //https://haluki.oss-cn-hangzhou.aliyuncs.com/
          return{
            imageUrl: '',
      ossUploadUrl: 'https://haluki.oss-cn-hangzhou.aliyuncs.com/', // 设置为你的OSS上传地址

            mytext:"",
           imageUrl: '',
           pageIndex:5,
            pageSize:10,
            total:300,
            dialogVisible:false,

            addForm:{
              id:'',
              img:'',
              name:'',
              sex:0,
              age:'',
              desc:''
            },

            tableData: [{
              id:'1',
              img:'https://img0.baidu.com/it/u=3304147277,3604343033&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
              name:'张三',
              sex:'男',
              age:'19',
              desc:''
            }, {
              id:'2',
              img:'https://img2.baidu.com/it/u=4222194183,836576660&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=657',
              name:'李四',
              sex:'男',
              age:'34',
              desc:''
            }, {
             id:'3',
             img:'https://img1.baidu.com/it/u=349389656,2696466771&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889',
             name:'马六',
             sex:'女',
             age:'24'
            }, {
              id:'4',
              img:'https://img1.baidu.com/it/u=2859658081,2209659509&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=735',
              name:'赵权',
              sex:'男',
              age:'25',
              desc:''
            }]
          }
        },
        created(){
          this.list();
        },
 methods :{
  async list () {
    // 不带任何参数，默认最多返回100个文件。
    const result = await client.list();
    console.log(result.objects.length)
     for(let i = 0;i<result.objects.length;i++){
       this.addForm.img = result.objects[i].url;
       console.log(result.objects[i].url);
       this.tableData.push(this.addForm);
       this.addForm={};
     }
    console.log(result);
},
      //分页条件查询
      listPage(){},
      //提交添加数据
      saveAddForm(){
        this.tableData.push(this.addForm)
       // console.log(this.addForm)
        this.dialogVisible = false
      },
      //条件查询
  //    selectWhere(){

  selectWhere(){

                     console.log("input"+this.mytext)
                     this.tableData=this.tableData.filter(item=>item.name.includes(this.mytext))//筛选出来包含输入框值的元素
                     //控制台输出可以获取到数据mytext,filter里面需要指定那一个属性包含那个值,菜鸡!!!!!!!!!!!!!!!!!!!!!!!!
                     //然后赋值给原数组，因为filter不会改变原数组，所以要用赋值的办法使得原数组改变，进而改变dom
                 },

update(data){

  this.addForm.id=data.id
  this.addForm.img = data.img
  this.addForm.name = data.name
  this.addForm.sex = data.sex
  this.addForm.age = data.age
  this.addForm.desc=data.desc
  this.dialogVisible=true
},
      del(id){
        this.tableData=this.tableData.filter((item)=>item.id!==id)
      },
      //添加
      add(){
        this.addForm={}
        this.dialogVisible = true
      },
       handleSizeChange(val) {
              console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
              console.log(`当前页: ${val}`);
            },
handleRemove(file, tableData) {
                    console.log(file, tableData);
                  },
                  async handleFileUploadSuccess(response, file) {
      
      this.addForm.img = file.url;
      console.log(this.addForm.img);
    },
    handleFileUploadError(err) {
      console.error('上传失败: ' + err.message);
    },
    async beforeUpload(file) {
      try {
        const options={
          meta:{type:'demo'},
          mime:'json',
          headers:{"name":this.addForm.name}
        }    
        const result = await client.put(file.name,file,options);
        console.log(result);
        file.url = result.url;
        console.log(file.url);
        this.addForm.img = file.url;
        return true;
      } catch (e) {
       conso.error('上传失败: ' + e.message);
        return false;
      }
    },
    
  },

    }


</script>

<style>

  avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
</style>
